import React, {Component} from 'react';
import {Grid,Dialog, Button,Step,Input,Icon,Feedback} from '@icedesign/base';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import SysDynamicIcon from '../../../../../../components/SysDynamicIcon/SysDynamicIcon';
import API from '../../../../../../tools/API';

const {Row, Col} = Grid;
const { Item: StepItem } = Step;
const { Group: ButtonGroup } = Button;
/**
* 修改密码
*/
export default class BaseModifyEmail extends Component{
  constructor(props) {
     super(props);
     this.state = {
       visible : false,
       currentStep: 0,
       number:0,
       newnumber:0,
       modifyState:false,
       user:{}
     }
     this.sendMessage = this.sendMessage.bind(this);
     this.sendNewMessage = this.sendNewMessage.bind(this);
  }

  //打开弹出层
  onOpen = () => {
    this.setState({
      visible: true,
      currentStep: 0,
      user:{
        email:this.props.email
      }
    });
  };
  //关闭弹出层
  onClose = () => {
    this.setState({
      visible: false
    });
    this.props.reload();
  };

  sendMessage(){
    // 发送验证码
    if (this.state.number > 0) {
       Feedback.toast.error("请稍后重试");
    }else if (this.state.user.email == undefined) {
       Feedback.toast.error("请输入邮箱");
    }else {
      API.sendEmailAuthCode({email:this.state.user.email}).then((res) => {
        this.setState({number:60});
        let siv = setInterval(()=>{
          let number = this.state.number
          if (number == 0) {
            clearInterval(siv);
          }else {
            this.setState({number:number-1});
          }
        },1000)
      });
    }
  }

  sendNewMessage(){
    // 发送验证码
    if (this.state.newnumber > 0) {
       Feedback.toast.error("请稍后重试");
    }else if (this.state.user.newEmail == undefined) {
       Feedback.toast.error("请输入邮箱");
    }else {
      API.sendEmailAuthCode({email:this.state.user.newEmail}).then((res) => {
        this.setState({newnumber:60});
        let siv = setInterval(()=>{
          let number = this.state.newnumber
          if (number == 0) {
            clearInterval(siv);
          }else {
            this.setState({newnumber:number-1});
          }
        },1000)
      });
    }
  }

  submitModifyEmail = () => {
   this.refs.form.validateAll((errors, values) => {
     if(errors == null){
       //验证
       let res = API.verifyEmailAuthCode({
           email:this.state.user.email,
           authCode:this.state.user.authCode
       });
       if (res.code != "000"){
         Feedback.toast.error(res.msg);
         let closeT = setInterval(()=>{
           Feedback.toast.hide();
           clearInterval(closeT);
         },1000)
       }else {
         const s = this.state.currentStep + 1;
         this.setState({
           currentStep: s > 2 ? 2 : s,
         });
       }
     }
   });
 };

//设置新手机号
  submitNewModifyEmail = () => {
   this.refs.form.validateAll((errors, values) => {
     if(errors == null){
       //验证
       let res = API.modifyEmail({
           email:this.state.user.newEmail,
           authCode:this.state.user.newAuthCode
       });
       console.log(res);
       const s = this.state.currentStep + 1;
       this.setState({
         currentStep: s > 2 ? 2 : s,
         modifyState: res.code=='000'?true:false
       });
     }
   });
 };



  render(){
    const {currentStep} = this.state;
    let email = this.state.user.email;
    if (email != undefined) {
      email = email.substr(0,3)+'***'+'@'+email.split('@')[1];
    }else {
      email = "未绑定";
    }
    return(
      <div>
        <a href="javaScript:;" onClick={this.onOpen}>修改</a>
        <Dialog
          visible={this.state.visible}
          footer={false}
          onClose={this.onClose}
          title="修改邮箱"
          className="add-user-dialog"
          style={{
            textAlign:'center',
          }}
          >
            <Step current={currentStep} type="dot" style={{marginTop:20}} readOnly={true}>
              <StepItem title="验证邮箱" icon={currentStep > 0?"success-filling":""}/>
              <StepItem title="输入新邮箱" icon={currentStep > 1?"success-filling":""}/>
              <StepItem title="完成" icon="success-filling"/>
            </Step>
            <br />

            {
              currentStep === 0?
              <IceFormBinderWrapper ref="form" value={this.state}>
                <div>
                  <div style={{margin:'10px'}}>
                    <span>邮箱：</span>
                  <Input disabled={true} value={email} style={{
                          width:198
                        }}/>
                  </div>

                <div style={{margin:'10px',paddingRight:100}}  className="send-phone">
                    <span>验证码：</span>
                  <IceFormBinder rules={[
                    {
                      type: 'required',
                      required: true,
                      message: '必填',
                    }
                    ]} name="user.authCode" >
                    <Input style={{
                      width:110
                    }} addonAfter={
                        <div>
                           {
                             this.state.number > 0 ?
                              <div style={{color: '#ffffff'}}>
                                {this.state.number} 秒
                              </div>
                            :
                              <div onClick={this.sendMessage}>
                               <SysDynamicIcon className="icon" style={{
                                   float: 'left',
                                   color: '#ffffff',
                                   cursor: 'pointer'
                                 }} type="paper" />
                              </div>
                           }
                        </div>
                      }/>
                  </IceFormBinder>
                  </div>
                  <div><IceFormError name="user.authCode" /></div>
                  <Button  onClick={this.submitModifyEmail}  style={{
                      marginTop:20
                    }} type="primary" > 下一步 </Button>
                </div>
              </IceFormBinderWrapper>
              :null
            }

            {
              currentStep === 1?
              <IceFormBinderWrapper ref="form" value={this.state}>
                <div>
                  <div style={{margin:'10px'}}>
                    <span>邮箱：</span>
                    <IceFormBinder rules={[
                      {
                        type: 'string',
                        required: true,
                        message: '必填',
                      },
                      {
                        type: 'email',
                        message: '请输入邮箱',
                      }
                    ]} name="user.newEmail" >
                        <Input style={{
                          width:198
                        }}/>
                  </IceFormBinder>
                  </div>
                  <div><IceFormError name="user.newEmail" /></div>

                <div style={{margin:'10px',paddingRight:100}}  className="send-phone">
                    <span>验证码：</span>
                  <IceFormBinder rules={[
                    {
                      type: 'required',
                      required: true,
                      message: '必填',
                    }
                    ]} name="user.newAuthCode" >
                    <Input style={{
                      width:110
                    }} addonAfter={
                        <div>
                           {
                             this.state.newnumber > 0 ?
                              <div style={{color: '#ffffff'}}>
                                {this.state.newnumber} 秒
                              </div>
                            :
                              <div onClick={this.sendNewMessage}>
                               <SysDynamicIcon className="icon" style={{
                                   float: 'left',
                                   color: '#ffffff',
                                   cursor: 'pointer'
                                 }} type="paper" />
                              </div>
                           }
                        </div>
                      }/>
                  </IceFormBinder>
                  </div>
                  <div><IceFormError name="user.newAuthCode" /></div>
                  <div style={{
                    fontSize: 12,
                    color: '#999'
                    }}>测试环境万能验证码：1234</div>
                  <Button  onClick={this.submitNewModifyEmail}  style={{
                      marginTop:20
                    }} type="primary" > 完成 </Button>
                </div>
              </IceFormBinderWrapper>
              :null
            }

            {
              currentStep ===2 ?
                <div>
                  {/* 修改密码完成 */}
                  {
                    this.state.modifyState?
                      <Row wrap={true} justify='center' style={{
                          marginBottom:30
                        }}>
                        <Col span='24'>
                          <Icon type="success-filling" size={"xxl"} style={{color:"#1ecb9b"}} />
                        <div className="modifyPwd-success"> 邮箱修改成功 </div>
                        </Col>
                        <Col span='24' style={{margin:'10px 0'}}>
                          <span>邮箱修改成功，已同步关联账户信息！</span>
                        </Col>
                        <Col span='24'>
                          <Button onClick={this.onClose}  style={{margin:'10px 10px'}}> 关闭 </Button>
                        </Col>
                      </Row>
                    :
                      <Row  wrap={true} justify='center' style={{
                          marginBottom:30
                        }}>
                          <Col span='24'>

                            <Icon type="delete-filling" size={"xxl"} style={{color:"#fc6f6d"}} />
                          <div className="modifyPwd-success"> 邮箱修改失败 </div>
                          </Col>
                          <Col span='24' style={{margin:'10px 0'}}>
                            <span>邮箱修改失败，请重新尝试</span>
                          </Col>
                          <Col span='24'>
                            <Button onClick={()=>{
                                //数据初始化
                                this.setState({
                                  number:0,
                                  newnumber:0,
                                  currentStep:0,
                                  user:{
                                    email:this.state.user.email
                                  }
                                });
                              }} type="primary" style={{margin:'10px 10px'}}> 返回 </Button>
                            <Button onClick={this.onClose}  style={{margin:'10px 10px'}}> 关闭 </Button>
                          </Col>
                      </Row>
                  }
                </div>
              : null
            }
          </Dialog>
      </div>
    )
  }

}
